
import * as echarts from 'echarts';
import ChartClass from './chartClass';
export default function line(dom) {


    var chartDom = dom
    var myChart = new ChartClass(chartDom);

    var option = {
        backgroundColor: "transparent",
        color: ['#FF5745', '#FA981E', '#FFD145', '#238483', '#45EAFF', '#12B3F8', '#0176D3', '#015BD3'],
        tooltip: {
            backgroundColor: "rgba(0,0,0,0.7)",
            trigger: 'item',
            formatter: (p) => `${p.name}}<br/>${p.value} 亿元`,

            textStyle: {
                color: '#fff' // 全局文本颜色设置为白色
            },
            borderColor: '#9b97beff',
            borderWidth: 1,
            padding: 10
        },
        polar: {},
        angleAxis: {
            show: false,
            type: 'category',
            data: ['洋河新区', '湖滨新区', '经开区', '宿城区', '宿豫区', '泗洪县', '泗阳县', '沭阳县'],
            z: 10,
            axisLine: { show: false },
            axisLabel: { color: '#9b97beff', fontSize: 14 }
        },
        radiusAxis: {
            min: 0,
            max: 100,
            interval: 20,
            axisLine: { show: false },
            axisLabel: { show: true, formatter: '{value}', color: '#9b97beff' },
            splitLine: { lineStyle: { color: '#9b97beff' } }
        },
        series: [
            {
                type: 'line',
                coordinateSystem: 'polar',
                data: [40, 40, 45, 50, 60, 70, 80, 90],
                name: '地区',
                stack: 'a',
                roundCap: true,
                lineStyle: {
                    width: 4,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#FF5745' },  // 起点颜色
                        { offset: 0.5, color: '#FA981E' }, // 中间颜色
                        { offset: 1, color: '#45EAFF' }    // 终点颜色
                    ])
                },
                itemStyle: {
                    borderRadius: 6,
                    shadowBlur: 5,
                    shadowColor: '#9b97beff',
                    color: function(params) {
                        // 根据数据值动态设置颜色
                        return params.value > 50 ? '#FF5745' : '#45EAFF';
                    }
                },
                label: {
                    show: false,
                    position: 'outside',
                    formatter: (p) => `${p.name}\n${p.value}亿元`,
                    fontSize: 12,
                    color: '#eee'
                }
            }
        ],
        legend: {
            show: true,
            data: ['地区'],
            top: 0,
            textStyle: {
                color: '#eee'
            }
        }
    };


    // === tooltip 自动轮播 ===
    let index = 0;
    setInterval(() => {
        let dataLen = option.series[0].data.length;

        // 先隐藏
        myChart.dispatchAction({
            type: 'hideTip'
        });

        // 再显示下一个
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index
        });

        index = (index + 1) % dataLen;
    }, 2000); // 每 2 秒切换一次



    option && myChart.setOption(option);

    return myChart
}